<script setup lang='ts'>
import { onMounted } from 'vue';
import { ref } from 'vue';
import {useRoute, useRouter} from "vue-router"
import searchStore from "@/store/searchStore"
interface LinkItem {
  bid: string
  title: string,
  author: string, 
  avatar: string,
  comments:string,
  goods:string,
  views:string,
  time:string,
}
const List =ref<LinkItem[]>([])

const news =[{
   bid:"1",
   title:"Hello world",
   author:"唐玮",
   avatar:'https://imgtw.oss-cn-chengdu.aliyuncs.com/head/2023/04/12/222.jpg',
   comments:"21",
   goods:"213",
   time:"2015-12-3 23:12:11",
   views:"11"
},{
   bid:"2",
   title:"Hello world",
   author:"唐玮",
   avatar:'https://imgtw.oss-cn-chengdu.aliyuncs.com/head/2023/04/12/222.jpg',
   comments:"21",
   goods:"213",
   time:"2015-12-3 23:12:11",
   views:"11"
},
{
   bid:"3",
   title:"Hello world",
   author:"唐玮",
   avatar:'https://imgtw.oss-cn-chengdu.aliyuncs.com/head/2023/04/12/222.jpg',
   comments:"21",
   goods:"213",
   time:"2015-12-3 23:12:11",
   views:"11"
},
{
   bid:"4",
   title:"Hello world",
   author:"唐玮",
   avatar:'https://imgtw.oss-cn-chengdu.aliyuncs.com/head/2023/04/12/222.jpg',
   comments:"21",
   goods:"213",
   time:"2015-12-3 23:12:11",
   views:"11"
},{
   bid:"5",
   title:"Hello world",
   author:"唐玮",
   avatar:'https://imgtw.oss-cn-chengdu.aliyuncs.com/head/2023/04/12/222.jpg',
   comments:"21",
   goods:"213",
   time:"2015-12-3 23:12:11",
   views:"11"
},{
   bid:"6",
   title:"Hello world",
   author:"唐玮",
   avatar:'https://imgtw.oss-cn-chengdu.aliyuncs.com/head/2023/04/12/222.jpg',
   comments:"21",
   goods:"213",
   time:"2015-12-3 23:12:11",
   views:"11"
},{
   bid:"7",
   title:"Hello world",
   author:"唐玮",
   avatar:'https://imgtw.oss-cn-chengdu.aliyuncs.com/head/2023/04/12/222.jpg',
   comments:"21",
   goods:"213",
   time:"2015-12-3 23:12:11",
   views:"11"
},{
   bid:"8",
   title:"Hello world",
   author:"唐玮",
   avatar:'https://imgtw.oss-cn-chengdu.aliyuncs.com/head/2023/04/12/222.jpg',
   comments:"21",
   goods:"213",
   time:"2015-12-3 23:12:11",
   views:"11"
},{
   bid:"9",
   title:"Hello world",
   author:"唐玮",
   avatar:'https://imgtw.oss-cn-chengdu.aliyuncs.com/head/2023/04/12/222.jpg',
   comments:"21",
   goods:"213",
   time:"2015-12-3 23:12:11",
   views:"11"
}
] as LinkItem[]
 

const numberCount=ref()
const numberYu=ref()


const  count=ref()
const  yu=ref()
const router =useRouter()
 onMounted(()=>{
  console.log("search-view");
 if(sessionStorage.getItem("search")=="flash"){
  sessionStorage.removeItem("search")
  // router.go(0)
 }
  // console.log(JSON.parse(searchStore().searchinfo));
 List.value= JSON.parse(searchStore().searchinfo)
   let number = news.length
    // numberCount.value =(number /4 )//每一行4个，一共多少行
    numberCount.value = Math.round(number /4)//每一行4个，一共多少行
    numberYu.value=number %4  //余数多少
    console.log(numberCount.value,numberYu.value);
    count.value=numberCount.value - 1

 })

 const CardClick=(v:any)=>{
      console.log(v);
      //TODO`点击之后，携带value去信息页面
      router.push(`/blogger/content/show?id=${v?.bid}`)
 }

</script>
<template>

<div class="w-10/12 -ml-[50px]">
  <el-empty class="-ml-[100px]" v-if="List.length==0" description="对不起,没有您要搜索的信息..." />
    <el-row  v-for="(v,index) in count" :key="index"  :gutter="20">
    <el-col class="mt-5" :span="6" v-for="(value,i) in List.slice(0,numberCount*4)" :key="i"  >
       <!-- {{ value.avatar }}  -->
      <el-card class="cursor-pointer" @click="CardClick(value)" shadow="hover" :body-style="{ padding: '0px' }">
        <img
          :src="value.avatar"
          class="image"
        />
        
        <div class="bg-slate-300" style="padding: 14px">
         <div class="flex justify-between">
          <span class="text-lg font-black text-gray-700 truncate hover:text-pink-700">{{value.title }}</span>
             <p class="text-sm text-red-600 font-black ">{{ value.author }}</p>
         </div>
          <div class="p-0 flex justify-around ">
             <time class="time">{{ value.time }}</time>
             <div>  <icon-message-emoji theme="outline" size="17" fill="#2f7fb9" />
               <p class="text-xs">{{value.comments}}</p>
              </div>

               <div>
                <icon-good-two theme="outline" size="17"
                fill="#2f7fb9"/>
                   <p class="text-xs">{{value.goods}}</p>

               </div>
               
               <div>
                  <icon-eyes theme="outline" size="17" fill="#bb7be5"/>
               <p class="text-xs">{{value.views}}</p>
               </div>
          </div>
        
        </div>
      </el-card>
    </el-col>
  </el-row>

  <!-- //余数多少 -->
  <el-row class="mt-5" v-for="(v,index) in numberYu" :key="index"  :gutter="20">
    <el-col :span="6" v-for="(value,i) in List.slice(numberCount*4)" :key="i">
        <el-card class="cursor-pointer"  @click="CardClick(value)" shadow="hover" :body-style="{ padding: '0px' }">
        <img
          :src="value.avatar"
          class="image"
        />
        
        <div style="padding: 14px">
          <span class="text-lg font-black text-gray-700 truncate hover:text-pink-700">{{value.title }}</span>
          <p class="text-sm text-red-600 font-black ">{{ value.author }}</p>
          <div  class="p-0 flex justify-around">
             <time class="time">{{ value.time }}</time>
             <div>  <icon-message-emoji theme="outline" size="17" fill="#2f7fb9" />
               <p class="text-xs">{{value.comments}}</p>
              </div>

               <div>
                <icon-good-two theme="outline" size="17"
                fill="#2f7fb9"/>
                   <p class="text-xs">{{value.goods}}</p>

               </div>
               
               <div>
                  <icon-eyes theme="outline" size="17" fill="#bb7be5"/>
               <p class="text-xs">{{value.views}}</p>
               </div>
          </div>
         
        </div>
      </el-card>
    </el-col>
  </el-row>
</div>

</template>
<style scoped lang='scss'>

.time {
  font-size: 12px;
  color: #999;
  margin-left: -15px;
  text-align: center;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
//   display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
}
</style>